<template>
<!--  <div style="padding: 5px 0px 8px 15px;font-size: 14px">-->
<!--    <el-row style="padding: 10px">-->
<!--      <el-col :span="clmSpan">-->
<!--        <div>-->
<!--          <div class="title-switch">是否点赞</div>-->
<!--          <el-switch v-model="valueDianzan"-->
<!--                     @change="handleSwtichChange"-->
<!--                     active-value="1"-->
<!--                     inactive-value="0"-->
<!--                     class="drawer-switch"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="clmSpan">-->
<!--        <div>-->
<!--          <div class="title-switch">是否关注</div>-->
<!--          <el-switch v-model="valueGuanzhu"-->
<!--                     @change="handleSwtichChange"-->
<!--                     active-value="2"-->
<!--                     inactive-value="0"-->
<!--                     class="drawer-switch"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="clmSpan">-->
<!--        <div>-->
<!--          <div class="title-switch">是否评论</div>-->
<!--          <el-switch v-model="valuePinglun"-->
<!--                     @change="handleSwtichChange"-->
<!--                     active-value="4"-->
<!--                     inactive-value="0"-->
<!--                     class="drawer-switch"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="clmSpan">-->
<!--        <div>-->
<!--          <div class="title-switch">评论是否评论</div>-->
<!--          <el-switch v-model="valuePinglunAgain"-->
<!--                     @change="handleSwtichChange"-->
<!--                     active-value="8"-->
<!--                     inactive-value="0"-->
<!--                     class="drawer-switch"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="clmSpan">-->
<!--        <div>-->
<!--          <div class="title-switch">点赞是否点赞</div>-->
<!--          <el-switch v-model="valueDianzanAgain"-->
<!--                     @change="handleSwtichChange"-->
<!--                     active-value="16"-->
<!--                     inactive-value="0"-->
<!--                     class="drawer-switch"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="clmSpan">-->
<!--        <div>-->
<!--          <div class="title-switch">是否解锁设备</div>-->
<!--          <el-switch v-model="valueLockDevice"-->
<!--                     @change="handleSwtichChange"-->
<!--                     active-value="32"-->
<!--                     inactive-value="0"-->
<!--                     class="drawer-switch"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--  </div>-->
  <div></div>
</template>

<script>

  import {mapGetters} from "vuex";

  export default {
    name: "TaskFooterSelect",
    props: {
      value: {
        type: Number,
        default: ''
      }
    },
    data() {
      return {
        clmSpan: 8,
        valueDianzan: 0,
        valuePinglun: 0,
        valueGuanzhu: 0,
        valueDianzanAgain: 0,
        valuePinglunAgain: 0,
        valueLockDevice: 0,
      };
    },
    computed: {
      ...mapGetters(['size']),
      size() {
        return this.$store.getters.size
      },
      device() {
        return this.$store.getters.device
      }
    },
    watch: {
      device: {
        deep: true,
        handler(val) {
          console.log(' device 改变' + val)
          if (val === 'mobile') {
            this.clmSpan = 12
          } else {
            this.clmSpan = 8
          }
        }
      },
    },
    created() {
      // this.valueDianzan = this.value & 0x01
      // this.valueGuanzhu = this.value & 0x02
      // this.valuePinglun = this.value & 0x04
      // this.valueDianzanAgain = this.value & 0x08
      // this.valuePinglunAgain = this.value & 0x10
      // this.valueLockDevice = this.value & 0x20
    },
    methods: {
      // 多选框选中数据
      handleSwtichChange() {
        const val = parseInt(this.valueDianzan) + parseInt(this.valueGuanzhu) + parseInt(this.valuePinglun)
                  + parseInt(this.valueDianzanAgain) + parseInt(this.valuePinglunAgain) + parseInt(this.valueLockDevice)
        console.log(val)
          this.$emit("update:value", val)
      },
    }
  };
</script>
<style>
  .title-switch {
    margin-top: 10px;
    width: 90px;
    display: inline-block;
  }
</style>
